웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용하여 마우스의 위치, 좌표값을 확인하는 방법에 대하여 알아보려합니다. 아래에서는 가장 간단한 방법인 제이쿼리를 사용해 알아보겠습니다
# 제이쿼리를 사용하여 마우스 위치 알아내기
만약에 현재 마우스 커서가 위치한 값을 얻기 위해서는 어떻게 해야할까요? 기본적으로 마우스를 사용하는 이벤트 객체를 사용해야 합니다. 이벤트 객체는 모든 이벤트 핸들러를 가지고 있으며 좌표값 역시 확인이 가능합니다. 그럼 아래의 예제를 통해 실제 마우스가 어디 위치에 있는지 알아보세요.# 마우스 클릭 위치 예제보기
; 아래 예제는 마우스를 클릭했을때의 브라우저에서의 현재 위치값(절대위치)을 가져오는 예제입니다. 마우스 위치를 가져오려면 이벤트 객체를 이용해야합니다. 아래 예제는 클릭 이벤트가 발생시 현재의 위치 값을 가져와 출력하는 예제입니다.이 예제에서 사용한 방버은 event.pageX 그리고 event.pageY 입니다. 이 두가지 속성은 전체 문서(document)에 해당하는 좌표값을 가져옵니다. 이는 해당하는 엘리먼트의 내부 위치가 아니라는 뜻입니다. 이를 쉽게 설명하기 위해서는 아래 이미지를 참고하기기 바랍니다.
다시말해 event.pageX 그리고 event.pageY의 경우 문서안에 해당하는 마우스 좌표값을 반환합니다.
# 마우스 위치 예제소스 event.pageX, event.pageY
아래 예제는 현재 마우스 좌표값을 보여주는 간단한 예제입니다.@mouse.css
#test {
width: 800px;
height: 800px;
display: block;
}
width: 800px;
height: 800px;
display: block;
}
다음은 html 파일 소스입니다.
@ mouse.html
<div>
<span id="test"></span>
</div>
<span id="test"></span>
</div>
@ mouse.js
var test = $('#test');
test.click(function (event) {
x = event.pageX;
y = event.pageY;
alert('x좌표:' +x + ', y좌표:' + y);
})
// 수평 및 수직 위치 값을 가져옴
test.click(function (event) {
x = event.pageX;
y = event.pageY;
alert('x좌표:' +x + ', y좌표:' + y);
})
// 수평 및 수직 위치 값을 가져옴
위 예제는 test 요소에 클릭 이벤트를 등록한 후 클릭이 발생시 좌, 우 위치값을 출력하는 예제로 클릭시 현재의 x, y좌표값을 alert() 함수로 출력합니다. 아래는 이를 구현 결과입니다. 실제로 아래 영역을 클릭해보세요. 클릭할 경우 해당하는 좌표값이 출력될 것입니다.
Click here!
그렇다면 브라우저의 보이는 영역에서의 마우스 좌표값이 필요한 경우 어떻게 해야할까요? 이 경우 event.clientX 그리고 event.clientY를 사용하여 알아낼 수 있습니다. 아래 코드는 이 코드를 사용하여 만든 예제소스입니다. 아래 코드를 봐주세요.
# 마우스 위치 event.clientX 그리고 event.clientY 예제보기
아래 예제는 위에서 언급한 것처럼 현재 브라우저의 크기를 기준으로 보이는 영역내에서의 마우스 좌표값입니다. 그럼 아래의 소스를 봐주세요. 차이점은 pageX 그리고 pageY 를 clientX 그리고 clientY로 바꾸었습니다.@ mouse.css
#test2 {
width: 800px;
height: 800px;
display: block;
}
width: 800px;
height: 800px;
display: block;
}
@ mouse.html
<div>
<div id="test2">
</div>
<div id="test2">
</div>
@ mouse.js
var test2 = $('#test2');
test2.click(function (event) {
x = event.clientX;
y = event.clientY;
alert('x좌표:' +x + ', y좌표:' + y);
})
// 수평 및 수직 위치 값을 가져옴
test2.click(function (event) {
x = event.clientX;
y = event.clientY;
alert('x좌표:' +x + ', y좌표:' + y);
})
// 수평 및 수직 위치 값을 가져옴
! 실전 작성된 코드 실행해보기
아래의 영역을 직접 클릭해보세요. 좌표가 반환됩니다.위 영역을 클리하면 이전의 요소를 클릭한 것과는 다른 결과값을 반환하는데 이는 현재 브라우저에서 보이는 부분을 기준으로 좌표값을 반환하기 때문입니다. 이런 이유로 만약 브라우저의 크기가 줄어드는 경우 반환하는 좌표값이 다르게 표시될 것입니다. 이를 기준하는 값이 달라지기 때문에 어떤 속성을 사용할 것인지 잘 결정해야합니다.
아래의 글도 찾고 계시지 않나요?
